<template>
  <div class="goods-item-container">
    <img :src="info?.imgUrl" alt="" style="width: 100%; height: 300px" />
    <div class="content">
      <div class="goods-title" :title="info?.title">
        {{ info?.title }}
      </div>
      <div class="goods-price">
        <span class="price">分销价：￥{{ toYuan(info?.sellingPrice) }}</span>
        <span class="sales">佣金：{{ info?.shopProfitRatio }}%</span>
        <span class="sales" v-if="info?.upperProfitRatio">邀请再赚：{{ info?.upperProfitRatio }}%</span>
      </div>
      <div style="border-bottom: 1px solid #f7f8f9"></div>
      <div class="goods-show">
        <div class="left">
          <div>可分销位置</div>
          <div>{{ info?.position }}个店铺</div>
        </div>
        <!-- <div class="center">
          <div>累计销量</div>
          <div>142件</div>
        </div> -->
        <div class="right" @click="handleClickDetail">详</div>
      </div>
    </div>
  </div>
  <Modal title="商品详情" :width="800" :height="600" ref="goodsDetailRef" @onConfirmAdd="handleConfirmAdd"
    ok-text="上架到闲鱼店铺">
    <template #contentValue>
      <div class="detail-container">
        <div class="content">
          <img :src="Image" style="border-radius: 5px; width: 250px;height: 300px" />
          <div class="detail-data">
            <div class="title">{{ info?.title }}</div>
            <div class="price">
              <div class="price-1">
                <div class="price-title">分销统一售价</div>
                <div class="price-value">{{ toYuan(info?.sellingPrice) }}元</div>
              </div>
              <div class="price-2">
                <div class="price-title">分销佣金</div>
                <div class="price-value">
                  ￥{{ toYuan(info.shopProfit) }}({{ info.shopProfitRatio }}%)
                </div>
              </div>
            </div>
            <div style="border-bottom: 1px solid #f7f8f9; margin-top: 15px"></div>
            <div class="additional-product">
              <div class="item">
                <div class="title1">可分销位置</div>
                <div class="value">{{ info?.position }}</div>
              </div>
              <div class="item">
                <div class="title1">店铺</div>
                <div class="value">-</div>
              </div>
              <div class="item">
                <div class="title1">发货地</div>
                <div class="value">{{ info?.sendPlaceName }}</div>
              </div>
              <div class="item">
                <div class="title1">快递</div>
                <div v-if="info?.fastMailType == 1" class="value">包 邮</div>
                <div class="value" v-if="info?.fastMailType == 2">
                  {{ toYuan(info?.postage) }}元
                </div>
              </div>
              <div class="item" v-if="info?.serviceAssurance?.length > 0">
                <div class="title1">服务保障</div>
                <div class="value">
                  <span v-if="info?.serviceAssurance.indexOf(1) !== -1" style="margin: 5px;">描述不符包退,
                  </span>
                  <span v-if="info?.serviceAssurance.indexOf(2) !== -1" style="margin: 5px;">二十四小时发货,
                  </span>
                  <span v-if="info?.serviceAssurance.indexOf(3) !== -1" style="margin: 5px;">四十八小时发货,
                  </span>
                  <span v-if="info?.serviceAssurance.indexOf(4) !== -1" style="margin: 5px;">假货包赔
                  </span>


                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="image-list-box">
          <div class="item-img" v-for="(item, index) in info?.productImages" @click="handleImage(item, index)"
            :class="{ active: selectImage == index }" :key="index">
            <img :src="item" style="width: 120px; height: 160px; border-radius: 6px" />
          </div>
        </div>
        <div class="goods-description">
          <div class="goods-description-title">商品描述</div>
          <div class="goods-description-content">
            {{ info?.desc }}
          </div>
        </div>
      </div>
    </template>
  </Modal>
  <AddGoods ref="addGoodsRef"></AddGoods>
</template>

<script setup lang="ts">
import Modal from '@/components/Modal/index.vue'
import { toYuan } from '@/hooks/util'
import AddGoods from './addGoods.vue'

import { ref } from 'vue'
let goodsDetailRef = ref()

const prop = defineProps({
  info: {
    type: Object,
  },
})
const { info } = toRefs(prop)
const addGoodsRef = ref()

const myModal = ref()
let Image = ref('')
let selectImage = ref(0)
const handleClickDetail = () => {
  if (!info?.value.position){
    return
  }
  info?.value.productImages.unshift(info?.value.imgUrl)
  Image.value = info?.value.productImages[0]
  info.value.productImages = [...new Set(info.value?.productImages)]

  goodsDetailRef.value.setVisible(true)
}
const handleImage = (item, index) => {
  selectImage.value = index
  Image.value = item
}
// const imageList = ref([
//   'https://file.goofish.pro/product/20241210/110452-3087dwfu.jpg?imageView2/2/w/243/h/243',
//   'https://file.goofish.pro/product/20241120/111343-4068wrlv.jpg?imageView2/2/w/243/h/243',
//   'https://file.goofish.pro/product/20241105/195734-4704odub.jpg?imageView2/2/w/243/h/243',
//   'https://file.goofish.pro/product/20250312/175250-4018nhrm.jpg?imageView2/2/w/243/h/243',
//   'https://file.goofish.pro/product/20241112/225125-4523iwnr.jpg?imageView2/2/w/243/h/243',
//   'https://file.goofish.pro/product/20250102/110359-9517ewub.jpg?imageView2/2/w/243/h/243',
// ])

// 点击上架商品
const handleConfirmAdd = () => {
  goodsDetailRef.value.setVisible(false)
  addGoodsRef?.value.showModal(info.value)
}
</script>
<style scoped lang="less">
body {}

.detail-container {
  user-select: none;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */

  .goods-description {
    margin-top: 25px;

    .goods-description-title {
      font-size: 16px;
      font-weight: 600;
    }

    .goods-description-content {
      margin-top: 15px;
    }
  }

  .image-list-box {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: #1890ff transparent;
    cursor: pointer;
    margin-top: 25px;
  }

  .item-img:nth-child(n + 2) {
    margin-left: 15px;
  }

  .active {
    border: 1px solid #1890ff;
    border-radius: 6px;
    // transition: all 0.3s;
  }

  .content {
    display: flex;

    .detail-data {
      margin-left: 20px;

      .title {
        font-size: 18px;
        font-weight: 700;
      }

      .additional-product {
        display: flex;
        // align-items: center;
        flex-wrap: wrap;

        .item {
          display: flex;
          margin-left: 15px;
          margin-top: 15px;
          max-width: 300px;

          .title1 {
            color: #858a99;
            font-size: 14px;
          }

          .value {
            margin-left: 20px;
            font-size: 14px;
          }
        }

        .item:nth-child(n + 2) {
          // margin-left: 15px;
        }
      }

      .price {
        display: flex;
        align-items: center;
        margin-top: 15px;

        .price-1,
        .price-2,
        .price-3 {
          display: flex;
          flex-direction: column;
          align-items: center;

          .price-title {
            color: #858a99;
            font-size: 14px;
          }

          .price-value {
            font-size: 20px;
            font-weight: 700;
          }
        }

        .price-1 {}

        .price-2 {
          margin-left: 30px;
        }

        .price-3 {
          margin-left: 30px;
        }
      }
    }

    // align-items: center;
  }
}

.goods-item-container {
  cursor: pointer;
  width: 100%;

  .content {
    padding: 10px;

    .goods-title {
      color: #000;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      /* 限制显示两行 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      font-weight: 500;
    }

    .goods-price {
      color: #858a99;
      margin-top: 15px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .goods-show {
      margin-top: 8px;
      font-size: 13px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .right {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color: #2f9bff;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>
